<template>
	<list class="pl-4" style="height: 500rpx;width: 520rpx;" :show-scrollbar="false">
		<!-- 礼物列表 -->
		<cell class="flex align-center py-3" v-for="(item, index) in gifts" :key="index" insert-animation="default" delete-animation="default" :ref="'item' + index">
			<!-- 礼物 -->
			<view class="flex align-center rounded-circle position-relative" style="width: 325rpx;background-image: linear-gradient(to right, #BCABB1 , #65AAF0);">
				<!-- 送礼人头像 -->
				<view class="p"><image src="../../static/tabbar/min.png" class="rounded-circle" style="width: 70rpx;height: 70rpx;"></image></view>
				<!-- 送礼人信息|礼物名称 -->
				<view class="flex-1   flex flex-column justify-center pl-1" style="height: 70rpx;">
					<text class="text-white font-sm">{{ item.username }}</text>
					<text class="text-white font-sm">送{{ item.giftName }}</text>
				</view>
				<!-- 礼物图片 -->
				<view class="rounded-circle  flex justify-center pr" style="width: 70rpx;height: 70rpx;">
					<image :src="item.giftImg" class="rounded-circle " style="width: 70rpx;height: 70rpx;"></image>
				</view>
			</view>
			<!-- 礼物数量 -->
			<text class="text-warning font-lg ml-2">X 10</text>
		</cell>
	</list>
</template>

<script>
const dom = weex.requireModule('dom');
export default {
	data() {
		return {
			gifts: []
		};
	},
	methods: {
		//送礼物
		send(gift) {
			this.gifts.push(gift);
			this.toBottom();
			this.autoDone();
		},
		//置于底部
		toBottom() {
			this.$nextTick(function() {
				let index = this.gifts.length - 1;
				let ref = 'item' + index;
				if (this.$refs[ref]) {
					dom.scrollToElement(this.$refs[ref][0], {});
				}
			});
		},
		// 自动消失
		autoDone() {
			if (this.gifts.length) {
				let timer = setTimeout(() => {
					this.gifts.splice(0, 1);
				}, 5000);
			}
		}
	}
};
</script>

<style></style>
